<template>
  <view class="page-container">
     <view class="header-container flex items-center">
       <view class="location-container flex justify-between" @click="openArea">
         <wd-picker :columns="areaList" value-key="code" label-key="name" use-default-slot @confirm="handleConfirmArea">
           <text class="area-label mr10">{{ areaLabel }}</text>
           <wd-icon name="arrow-down" size="18px" color="#333333"></wd-icon>
         </wd-picker>
       </view>
       <view class="search-container">
         <view class="input-container">
           <wd-input type="text"
                     custom-class="custom-search-input-class"
                     v-model="searchValue" placeholder="搜索"
                     @click="handleNavSearch"
           />
         </view>
<!--         <view class="search-btn-container">
           <wd-icon name="search" size="22px" color="#ffffff"></wd-icon>
         </view>-->
       </view>
     </view>
    <view class="swiper-container">
      <wd-swiper
          :list="swiperList"
          height="168.5"
          value-key="imgUrl"
          autoplay
      ></wd-swiper>
    </view>
    <view class="food-restaurant-header">
      <image class="restaurant-logo" src="http://img.jowong.com/aba/2025-04-09/组 2@2x_1744192896342.png" ></image>
    </view>
    <view class="type-list-container">
      <scroll-view
        :scroll-x="true"
        class="type-list-scroll"
      >
        <view
            v-for="(item,index) in typeList"
            :key="index"
            :class="['type-item',restaurantType === item.code ? 'selected-type-item' : '']"
            @click="changeType(item)"
        >
          {{item.name}}
        </view>
      </scroll-view>
    </view>
    <view class="provider-container">
      <view
          v-for="(item,index) in providerList"
          :key="index"
          class="provider-item flex mb20"
          @click="handleNavProviderDetail(item)"
      >
        <image class="provider-img" :src="item.headImageUrl" :lazy-load="true"></image>
        <view class="provider-info-container flex flex-col justify-between ">
          <view class="basic-info">
            <view class="provider-name">{{item.name}}</view>
            <view class="provider-description mt10">{{item.address}}</view>
          </view>
          <view class="distant">{{item.distance}}</view>
        </view>
      </view>
    </view>
    <wd-status-tip image="content" tip="暂无内容" v-if="!providerList.length"/>
  </view>
</template>

<script setup>
  import {foodProviderList} from "@/api/food";
  import { useCommonData } from "@/hook/useCommonData";

  const { queryCommonArea,queryUserDetailAddress } = useCommonData();

  const searchValue = ref("");
  const swiperList = ref([
    {imgUrl:"https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg"}
  ]);
  const restaurantType = ref("");
  const typeList = ref([]);
  const pageNumber = ref(1);
  const providerList = ref([]);
  const areaList = ref([]);
  const areaLabel = ref("");
  const areaCode = ref("");

  const handleNavSearch = () => {
    console.log("test")
    uni.navigateTo({
      url: `/ticketSubPack/pages/ticketScenicSpotSearch/index?searchValue=${""}`
    })
  };
  const changeType = (item) => {
    let {code} = item;
    restaurantType.value = code;
    queryFoodProviderList();
  };
  const handleNavProviderDetail = (item) => {
    let {id} = item;
    uni.navigateTo(({
      url:`/foodSubPack/pages/foodProviderDetail/index?providerId=${id}`
    }))
  };
  const handleConfirmArea = (event) => {
    console.log(event.selectedItems,'event');
    let { code, name } = event.selectedItems;
    areaLabel.value = name;
    if (code !== areaCode.value) {
      areaCode.value = code;
      queryFoodProviderList();
    }
  };
  const queryFoodProviderList = async() => {
    let {latitude,longitude} = uni.getStorageSync("locationInfo");
    await foodProviderList({
      current: pageNumber.value,
      size: 5,
      lat: latitude,lnt:longitude,
      restaurantType: restaurantType.value,
      district: areaCode.value
    }).then(res => {
      providerList.value = res.result;
	  providerList.value.map(item => {
		  if (item.distance >= 1000) {
			  item.distance = (item.distance / 1000).toFixed(1) + 'Km';
		  } else {
			  item.distance = parseInt(item.distance) + "m";
		  }
	  })
    });
  };
  const queryFoodTypeAreaList = () => {
    queryCommonArea("RESTAURANT_TYPE,AREA").then(res => {
      let { AREA, RESTAURANT_TYPE } = res;
      if(RESTAURANT_TYPE && RESTAURANT_TYPE.length > 0) {
        typeList.value = RESTAURANT_TYPE;
      }
      typeList.value.unshift({code: "",dictKey: "",idx: "", name: "全部"});
      areaList.value = AREA;
      let { latitude, longitude } = uni.getStorageSync("locationInfo");
      queryUserDetailAddress(latitude, longitude).then((addressRes) => {
        let areaObj = addressRes ? areaList.value.find((item) => item.code === addressRes) : null;
        let { code, name } = areaObj || areaList.value[0];
        areaLabel.value = name;
        areaCode.value = code;
        queryFoodProviderList();
      });
    })
  };
  const openArea = () => {};

  onShow(() => {
    queryFoodTypeAreaList();
  });
</script>

<style lang="scss" scoped>
  .page-container {
    padding: 28rpx;
    min-height: 100vh;
    background: #fdffeb;
    .header-container {
      .location-container {
        margin-right: 28rpx;
        align-items: baseline;
        .area-label {
          font-size: 33.5rpx;
          color: #2B2B24;
          font-weight: bold;
        }
      }
      .search-container{
        flex:1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 69rpx;
        margin-left: 0;
        border-radius: 34rpx;
        overflow: hidden;
        background-color: #FDFFEB;
        border: 2rpx solid #508963;
        box-shadow: -3rpx -1rpx 5rpx 0rpx rgba(0, 0, 0, 0.17);
        .input-container{
          :deep(.custom-search-input-class) {
            background: #feffea;
            height: 69rpx;
            width: 430rpx;
            .wd-input__body {
              height: 69rpx;
              .wd-input__value{
                height: 100%;
                padding-left: 20rpx;
              }
            }
          }
        }
        .search-btn-container{
          width: 130rpx;
          border-top-left-radius: 35rpx;
          border-bottom-left-radius: 35rpx;
          text-align: center;
          background: #508963;
          height: 69rpx;
          line-height: 69rpx;
        }
      }
    }
    .swiper-container {
      padding: 67.5rpx 0 82.5rpx 0;
    }
    .food-restaurant-header {
      .restaurant-logo {
        width: 229rpx;
        height: 44.5rpx;
      }
    }
    .type-list-container {
      padding: 26.5rpx 0 29rpx 0;
      .type-list-scroll {
        height: 100%;
        .type-item {
          margin-right: 8rpx;
          padding:10rpx 28.5rpx;
          font-size: 22.5rpx;
          border-radius: 10rpx;
          font-weight: bold;
          background-color: #EEEFE7;
          display: inline-block;
          box-sizing: border-box;
        }
        .selected-type-item {
          border: 1rpx solid #1B9C61;
          color: #1B9C61;
        }
      }
    }
    .provider-container {
      .provider-item {
        padding: 20.5rpx 13rpx;
        border-radius: 10.5rpx;
        background: #EEF0DF;
        .provider-img {
          width: 152rpx;
          height: 152rpx;
          border-radius: 10.5rpx;
        }
        .provider-info-container {
          padding-left: 18.5rpx;
          .basic-info {
            color: #2B2B24;
            .provider-name {
              font-size: 33.5rpx;
              font-weight: bold;
            }
            .provider-description {
              font-size: 25rpx;
            }
          }
          .distant {
            font-size: 22.5rpx;
            color: #777777;
          }
        }
      }
    }
  }
</style>
